<script setup>
import {reactive} from "vue";
import {requestAllWares} from "@/api";
const routerGroup = reactive({
  linkIndex() {
    uni.redirectTo({url: "../index/index"});
  },
  linkOrder() {
    uni.redirectTo({url: "../order/order"});
  },
  linkUser() {
    uni.redirectTo({url: "../user/user"});
  },
  linkShop() {
    uni.navigateTo({url: "../shop/shop"})
  }
})
const swiper = reactive({
  //指示器
  indicatorDots: true,
  //自动播放
  autoplay: true,
  //时间，单位毫秒
  interval: 3000,
  //移动速度
  duration: 500,
})
const waresGroup = reactive({
  wares:[],
  async getWares(){
    this.wares = [];
    let result = await requestAllWares();
    if (result.statusCode === 200) {
      for (let ware of result.data) {
        if (ware.type === "商务套餐"){
          this.wares.push(ware);
        }
      }
    }
  }
})

waresGroup.getWares()
</script>

<template>
  <scroll-view scroll-y="true">
    <view class="container-box">
      <view class="top">
        <van-row>
          <van-col span="16">
            <view class="top-title-box">
              <text class="top-title">HarryRestaurant</text>
            </view>
          </van-col>
          <van-col span="8">
            <view class="top-btn-box">
              <button class="top-btn" @click="routerGroup.linkShop()">进店</button>
            </view>
          </van-col>
        </van-row>
      </view>
      <view class="top-swiper">
        <van-row>
          <view class="uni-margin-wrap">
            <swiper :autoplay="swiper.autoplay" :duration="swiper.duration" :indicator-dots="swiper.indicatorDots"
                    :interval="swiper.interval" circular
                    class="swiper">
              <swiper-item>
                <view class="swiper-item"><img alt="" class="swiper-img" src="http://118.178.254.102:1251/index/index-banner-1.jpg"></view>
              </swiper-item>
              <swiper-item>
                <view class="swiper-item"><img alt="" class="swiper-img" src="http://118.178.254.102:1251/index/index-banner-2.jpg"></view>
              </swiper-item>
              <swiper-item>
                <view class="swiper-item"><img alt="" class="swiper-img" src="http://118.178.254.102:1251/index/index-banner-3.jpg"></view>
              </swiper-item>
              <swiper-item>
                <view class="swiper-item"><img alt="" class="swiper-img" src="http://118.178.254.102:1251/index/index-banner-4.jpg"></view>
              </swiper-item>
              <swiper-item>
                <view class="swiper-item"><img alt="" class="swiper-img" src="http://118.178.254.102:1251/index/index-banner-5.jpg"></view>
              </swiper-item>
            </swiper>
          </view>
        </van-row>
      </view>
      <view class="main-box">
        <van-row>
          <van-col span="16">
            <view class="main-title-box">
              <text class="main-title">精选菜品</text>
            </view>
          </van-col>
          <van-col span="8">
            <view class="main-btn-box">
              <button class="main-btn" @click="routerGroup.linkShop()">更多</button>
            </view>
          </van-col>
        </van-row>
        <van-row>
          <scroll-view class="main-scroll" scroll-x="true">
            <view class="main-scroll-item" v-for="(ware,index) of waresGroup.wares" :key="index">
              <view class="main-scroll-item-img-box">
                <img alt="" class="main-scroll-item-img" :src="'http://118.178.254.102:1251'+ware.pic">
              </view>
              <view class="main-scroll-item-info">
                <van-row>
                  <van-col span="12">
                    <view class="main-scroll-item-title-box">
                      <p class="main-scroll-item-title">{{ware.name}}</p>
                      <p class="main-scroll-item-price">￥{{ware.price}}</p>
                    </view>
                  </van-col>
                  <van-col span="12">
                    <view class="main-scroll-item-btn-box">
                      <button class="main-scroll-item-info-btn" @click="routerGroup.linkShop()">+</button>
                    </view>
                  </van-col>
                </van-row>
              </view>
            </view>
          </scroll-view>
        </van-row>
      </view>
      <view class="bottom-box">
        <img alt="" class="bottom-box-img" src="http://118.178.254.102:1251/index/index-bottom.jpg">
      </view>
      <view class="message"></view>
    </view>
    <van-row>
      <van-tabbar>
        <van-tabbar-item icon="home-o" @click="routerGroup.linkIndex">首页</van-tabbar-item>
        <van-tabbar-item icon="search" @click="routerGroup.linkOrder">订单</van-tabbar-item>
        <van-tabbar-item icon="friends-o" @click="routerGroup.linkUser">我的</van-tabbar-item>
      </van-tabbar>
    </van-row>
  </scroll-view>
</template>

<style scoped src="../../css/index.css">

</style>
